import React, {Component} from 'react';
import {Modal, Form, Input} from 'antd';
import {findUserbyID1} from '../../services/users';
import RoleNameSelect from "../specialSelect/roleNameSelect";

const FormItem = Form.Item;

class UserEditModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  async findUserbyID(id) {
    let s = await findUserbyID1(id);
    return s;
  }

  showModelHandler = (e) => {
    let id = this.props.record.ID;
    let m = this.findUserbyID(id);
    m.then((result)=> {
      this.setState(...this.state,result.data);
    });
    if (e) e.stopPropagation();
    this.setState({
      visible: true,
    });
  };



  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const {onOk} = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
        this.hideModelHandler();
      }
    });
  };

  render() {
    const {children} = this.props;
    const {getFieldDecorator} = this.props.form;
    const {ID, NAME, EMAIL, DEPARTMENT,ROLE_ID} = this.state;
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14},
    };
    return (
      <span>
        <span onClick={this.showModelHandler}>
          {children}
        </span>
        <Modal
          title="Edit User"
          visible={this.state.visible}
          onOk={this.okHandler}
          onCancel={this.hideModelHandler}
        >
          <Form layout="horizontal" onSubmit={this.okHandler}>
            <FormItem
              {...formItemLayout}
              label="Name"
            >
              {
                getFieldDecorator('NAME', {
                  initialValue: NAME,
                })(<Input/>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="Email"
            >
              {
                getFieldDecorator('EMAIL', {
                  initialValue: EMAIL,
                })(<Input/>)
              }
            </FormItem>
             <FormItem
               {...formItemLayout}
               label="用户组"
             >
              {
                getFieldDecorator('ROLE_ID', {
                  initialValue: {ROLE_ID:ROLE_ID}
                })(<RoleNameSelect />)
              }

            </FormItem>
            <FormItem
              {...formItemLayout}
              label="部门"
            >
              {
                getFieldDecorator('DEPARTMENT', {
                  initialValue: DEPARTMENT,
                })(<Input/>)
              }
            </FormItem>
          </Form>
        </Modal>
      </span>
    );
  }
}

export default Form.create()(UserEditModal);
